import "./index.scss";
import { Button, Checkbox, Form, Input, Card, Space } from "antd";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
export default function () {
  let navigate = useNavigate();
  const [MyForm] = Form.useForm();
  const onFinish = (values) => {
    if (values.username === values.password) {
      console.log("Success:", values);
      navigate("/Home");
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  const onReset = () => {
    MyForm.resetFields();
  };
  return (
    <>
      <div className="root">
        <Card className="cardStyle" title="欢迎登录" bordered={false}>
          <Form
            name="basic"
            form={MyForm}
            labelCol={{ span: 6 }}
            wrapperCol={{
              span: 25,
            }}
            style={{
              maxWidth: 600,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Space>
                <Button type="primary" htmlType="submit">
                  Submit
                </Button>
                <Button onClick={onReset}>Reset</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </>
  );
}
